<template>
	<view :style="{ marginTop: mbConfig + 'rpx', background: themeColor, borderRadius: bgStyle + 'rpx' }"
		v-if="tempArr.length">
		<view class="index-product-wrapper" :style="{ background: themeColor, borderRadius: bgStyle + 'rpx' }">
			<!-- 单列 -->
			<block v-if="itemStyle == 0">
				<view class="list-box listA" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item acea-row row-between" :class="'cont' + conStyle" v-for="(item, index) in tempArr" :key="index"
						@click="goDetail(item)">
						<view class="pictrue" :class="'cont' + conStyle">
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
							<view v-if="item.stock == 0" class="sell_out">已售罄</view>
							<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }"
								class="border-picture"></view>
						</view>
						<view class="text-info acea-row row-column-between">
							<view style="max-width: 100%">
								<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
								<view v-if="dataConfig.distanceShow && dataConfig.distanceShow.val && item.distance"
									style="margin-top: 8rpx;">
									<MerDistanceInfo :info="item" />
								</view>
								<view class="merchant_info">
									<view v-if="item.merchant && item.merchant.type_name" :style="'background:' + labelColor"
										class="font-bg-red">{{ item.merchant.type_name }}</view>
									<view class="txt" :style="'border-color:' + priceColor + ';color:' + priceColor + ';'"
										v-if="item.issetCoupon && couponShow">领券</view>
									<view class="txt delivery" v-if="item.delivery_free">包邮</view>
								</view>
							</view>
							<view v-if="priceShow" class="price acea-row" :style="'color:' + priceColor">
								<view class="semiBold">
									<priceFormat :price="item.price" weight intSize="40" floatSize="26" labelSize="26"></priceFormat>
								</view>
							</view>
						</view>
						<view class="add-cart acea-row row-middle row-center" :style="'background:' + labelColor"
							@click.stop='selecAttr(item)'>
							<text class="iconfont icon-ic_ShoppingCart1"></text>
						</view>
					</view>
				</view>
			</block>
			<!-- 两列 -->
			<block v-if="itemStyle == 1">
				<view class="list-box listS" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)"
						:class="'bg' + conStyle">
						<view class="pictrue picture1" :class="'cont' + conStyle">
							<!-- <image :src="item.image" mode=""></image> -->
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
							<view v-if="item.stock == 0" class="sell_out">已售罄</view>
							<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }"
								class="border-picture"></view>
						</view>
						<view class="text-info" :class="{ 'min-height': dataConfig.addCartShow && dataConfig.addCartShow.val }"
							v-if="goodInfoShow">
							<view v-if="dataConfig.distanceShow && dataConfig.distanceShow.val && item.distance"
								style="margin-bottom: 16rpx">
								<MerDistanceInfo :info="item" />
							</view>
							<view v-if="titleShow" class="title line1">{{ item.store_name }}</view>
							<view v-if="priceShow" class="price acea-row" :style="'color:' + priceColor">
								<view class="semiBold">
									<priceFormat :price="item.price" weight intSize="40" floatSize="26" labelSize="26"></priceFormat>
								</view>
							</view>
						</view>
						<view class="add-cart acea-row row-middle row-center" :style="'background:' + labelColor"
							@click.stop='selecAttr(item)' v-if="dataConfig.addCartShow && dataConfig.addCartShow.val">
							<text class="iconfont icon-ic_ShoppingCart1"></text>
						</view>
					</view>
				</view>
			</block>
			<!-- 三列 -->
			<block v-if="itemStyle == 2">
				<view class="list-box listB" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
						<view class="pictrue" :class="'cont' + conStyle">
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
							<view v-if="item.stock == 0" class="sell_out">已售罄</view>
							<view v-if="item.border_pic" :style="{ backgroundImage: `url(${item.border_pic})` }"
								class="border-picture"></view>
						</view>
						<view class="text-info">
							<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
							<view v-if="priceShow" class="price">
								<view v-if="priceShow" :style="'color:' + priceColor" class="semiBold">
									<priceFormat :price="item.price || 0" weight intSize="40" floatSize="26" labelSize="26"></priceFormat>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<!--大图-->
			<block v-if="itemStyle == 3">
				<view class="list-box listC" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
					<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)"
						:style="'border-radius:' + bgStyle + 'rpx;'">
						<view class="pictrue" :class="'cont' + conStyle">
							<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
							<view class="distance-info-wrap"
								v-if="dataConfig.distanceShow && dataConfig.distanceShow.val && item.distance">
								<MerDistanceInfo :info="item" blur />
							</view>
						</view>
						<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
							<view v-if="titleShow" class="title line2">{{ item.store_name }}</view>
							<view v-if="priceShow || opriceShow" class="price">
								<view v-if="priceShow" :style="'color:' + priceColor" class="semiBold">
									<priceFormat :price="item.price" weight intSize="40" floatSize="26" labelSize="26"></priceFormat>
								</view>
							</view>
						</view>
						<view class="add-cart acea-row row-middle row-center" :style="'background:' + labelColor"
							@click.stop='selecAttr(item)'>
							<text class="iconfont icon-ic_ShoppingCart1"></text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 组件 -->
		<productWindow :attr="attr" :isShow='true' :iSplus='1' :destri="0" :isList="true" :isTab="true" :isCustom="isCustom"
			@myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @goCat="goCat"
			@iptCartNum="iptCartNum" id='product-window' :payLimit="pay_limit" :maxCount="max_count" :minCount="min_count"
			:svipPrice="svipPrice" :image="storeInfo.image"></productWindow>
	</view>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { getProductData } from '@/api/api.js';
import productWindow from '@/components/productWindow';
import util from '@/utils/util.js';
import { mapGetters } from 'vuex';
import MerDistanceInfo from './MerDistanceInfo.vue';

export default {
	components: {
		productWindow,
		MerDistanceInfo
	},
	name: 'goodList',
	props: {
		dataConfig: {
			type: Object,
			default: () => { }
		},
		merId: {
			type: String || Number,
			default: ''
		},
		isCustom: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			tempArr: [],
			mbConfig: this.dataConfig.mbConfig.val * 2,
			numConfig: this.dataConfig.numConfig.val ? this.dataConfig.numConfig.val : this.dataConfig.numConfig.val,
			themeColor: this.dataConfig.themeColor.color[0].item,
			priceColor: this.dataConfig.fontColor.color[0].item,
			labelColor: this.dataConfig.labelColor.color[0].item,
			itemStyle: this.dataConfig.itemStyle.type,
			sortType: this.dataConfig.goodsSort.type,
			conStyle: this.dataConfig.conStyle.type,
			bgStyle: this.dataConfig.bgStyle.type ? '24' : '0',
			type: this.dataConfig.tabConfig.tabVal || 0,
			selectId: this.dataConfig.selectConfig.activeValue || 0,
			productIds: this.dataConfig.goodsList.ids || [],
			titleShow: this.dataConfig.titleShow.val,
			priceShow: this.dataConfig.priceShow.val,
			couponShow: this.dataConfig.couponShow.val,
			diy_id: this.dataConfig.did,
			unique: this.dataConfig.timestamp,
			max_count: 0,
			min_count: 0,
			pay_limit: 1,
			svipData: {},
			svipPrice: false,
			attr: {
				cartAttr: false,
				productAttr: [],
				productSelect: {}
			},
			storeInfo: {},
			cart_num: 1, //购买数量
			isOpen: false, //是否打开属性组件
			selectedArr: [],
			productValue: [], //系统属性
			attrValue: "",

			sortKeyMap: {
				0: 'sort',
				1: 'sales',
				2: 'price_asc',
				3: 'range_asc'
			}
		};
	},
	computed: {
		...mapGetters(['location']),
		goodInfoShow() {
			const condition = [
				this.dataConfig.addCartShow && this.dataConfig.addCartShow.val,
				this.dataConfig.distanceShow && this.dataConfig.distanceShow.val,
				this.dataConfig.priceShow && this.dataConfig.priceShow.val,
				this.dataConfig.titleShow && this.dataConfig.titleShow.val,
			];

			return condition.some(item => !!item);
		}
	},
	watch: {
		location() {
			this.productslist();
		}
	},
	created() { },
	mounted() {
		this.productslist();
	},
	methods: {
		productslist() {
			let data = {};
			if (this.type == 1) {
				data = {
					diy_id: this.diy_id,
					unique: this.unique,
					mer_id: this.merId,
					product_ids: this.productIds.toString(),
					limit: this.productIds.length,
				};
			} else {
				data = {
					diy_id: this.diy_id,
					unique: this.unique,
					mer_id: this.merId,
					order: this.sortKeyMap[this.sortType],
					limit: this.numConfig,
				};

				// 如果当前没有定位信息，则使用默认的排序方式
				if (!this.location && this.sortType == 3) {
					data.order = 'sort'
				}

				if (this.merId) {
					data.mer_cate_id = (this.selectId && this.selectId.toString()) || ''
				} else {
					data.cate_pid = (this.selectId && this.selectId.toString()) || ''
				}
			}
			Object.assign(data, this.location);
			getProductData(data).then(res => {
				this.tempArr = res.data.list;
			});
		},
		goDetail(item) {
			this.$emit('detail', item);
		},
		/**
		 * 打开属性插件
		 */
		selecAttr: function (item) {
			let that = this;
			let type = item.product ? item.product.type : item.type
			if ((item.product_type == 0 && type != 0) || item.product_type > 0 || item.mer_form_id) {
				that.goDetail(item);
			} else {
				that.storeInfo = item;
				util.getProductSpecs(item.spu_id, function (data) {
					that.$set(that, "attr", data.attr);
					that.$set(that.attr.productSelect, "store_name", item.store_name);
					that.$set(that, 'productValue', data.productValue);
					that.$set(that, "attrValue", data.attrValue);
					// that.$set(that, 'svipPrice', item.show_svip_info && item.show_svip_info.show_svip_price || false);
					that.$set(that.attr, 'cartAttr', true);
					that.$set(that, 'isOpen', true);
				})
			}
		},
		onMyEvent: function () {
			this.$set(this.attr, 'cartAttr', false);
			this.$set(this, 'isOpen', false);
		},
		attrVal(val) {
			this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
		},
		/**
		 * 购物车手动填写
		 *
		 */
		iptCartNum: function (e) {
			this.$set(this.attr.productSelect, 'cart_num', e);
		},
		/**
		 * 属性变动赋值
		 *
		 */
		ChangeAttr: function (res) {
			let productSelect = this.productValue[res];
			this.attr.productSelect = { ...this.attr.productSelect, ...productSelect }
			if (!productSelect || productSelect.stock <= 0) {
				this.$set(this.attr.productSelect, "stock", 0);
				this.$set(this.attr.productSelect, "unique", "");
				this.$set(this.attr.productSelect, "cart_num", 0);
			}
		},
		/**
		 * 购物车数量加和数量减
		 *
		 */
		ChangeCartNum: function (changeValue) {
			//changeValue:是否 加|减
			//获取当前变动属性
			let productSelect = this.productValue[this.attrValue];
			let that = this
			util.ChangeCartNum(productSelect, this.attr, changeValue, function (stock) {
				this.$set(that.attr.productSelect, "cart_num", stock);
			})
		},
		/*
		 * 加入购物车
		 */
		goCat: function () {
			let that = this,
				productSelect = that.productValue[this.attrValue];
			//打开属性
			if (that.attrValue) {
				//默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
				that.attr.cartAttr = !that.isOpen ? true : false;
			} else {
				if (that.isOpen) that.attr.cartAttr = true;
				else
					that.attr.cartAttr = !that.attr.cartAttr;
			}
			//只有关闭属性弹窗时进行加入购物车
			if (that.attr.cartAttr === true && that.isOpen === false)
				return (that.isOpen = true);
			that.isOpen = that.attr.cartAttr = true;
			//如果有属性,没有选择,提示用户选择
			if (
				that.attr.productAttr.length &&
				that.isOpen === true &&
				productSelect.stock == 0
			)
				return that.$util.Tips({
					title: "产品库存不足，请选择其它"
				});
			if (that.attr.productSelect.cart_num == 0) {
				return that.$util.Tips({
					title: '购买个数不能为0！'
				})
			}
			let q = {
				is_new: 0,
				product_id: that.storeInfo.product_id,
				cart_num: that.attr.productSelect.cart_num,
				product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : "",
				product_type: that.storeInfo.product_type,
			};
			util.addCart(q, function () {
				that.isOpen = that.attr.cartAttr = false;
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.index-product-wrapper {
	margin: 0 20rpx;

	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 327rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			position: relative;

			&.on {
				border-radius: 0;
			}

			.pictrue,
			::v-deepimage,
			::v-deep.easy-loadimage,
			::v-deepuni-image {
				width: 100%;
				display: block;
				position: relative;
			}

			.picture1,
			::v-deep.picture1 image,
			::v-deep.picture1 .easy-loadimage,
			::v-deep.picture1 uni-image {
				height: 346rpx;
				position: relative;
			}

			.sell_out {
				display: flex;
				width: 150rpx;
				height: 150rpx;
				align-items: center;
				justify-content: center;
				border-radius: 100%;
				background: rgba(0, 0, 0, .6);
				color: #fff;
				font-size: 30rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);

				&::before {
					content: "";
					display: block;
					width: 140rpx;
					height: 140rpx;
					border-radius: 100%;
					border: 1px dashed #fff;
					position: absolute;
				}
			}

			.cont1,
			::v-deep.cont1 image,
			::v-deep.cont1 .easy-loadimage,
			::v-deep.cont1 uni-image,
			.cont1 .border-picture {
				border-radius: 16rpx;
			}

			.text-info {
				padding: 10rpx 20rpx 0;

				.title {
					color: #222222;
				}

				.price {
					display: flex;
					margin-top: 20rpx;
					font-size: 26rpx;
					align-items: center;

					text {
						font-size: 36rpx;
						font-weight: 550;
					}

					.ot-price {
						color: #aaa;
						font-size: 26rpx;
						text-decoration: line-through;
						margin-left: 6rpx;
						font-weight: normal;
						margin-top: 10rpx;
					}
				}
			}

			.pictrue {
				position: relative;
			}

			.border-picture {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				background: center/cover no-repeat;
			}
		}

		.merchant_info {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.merchant_type {
				color: #fff;
				line-height: 30rpx;
				padding: 0 10rpx;
				border-radius: 2rpx;
				font-size: 22rpx;
			}

			.txt {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 4rpx;
				height: 28rpx;
				margin-left: 15rpx;
				border: 1px solid $theme-color;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-weight: normal;

				&.delivery {
					color: #FF9000;
					border-color: #FF9000;
				}
			}
		}

		&.on {
			display: flex;
		}

		&.listA {
			.item {
				width: 100%;
				background: #fff;
				padding: 20rpx;

				&.cont1 {
					border-radius: 16rpx;
				}

				.pictrue,
				::v-deepimage,
				::v-deep.easy-loadimage,
				::v-deepuni-image {
					width: 250rpx;
					height: 250rpx;
				}

				.sell_out {
					width: 124rpx;
					height: 124rpx;

					&::before {
						width: 110rpx;
						height: 110rpx;
					}
				}

				.text-info {
					width: 400rpx;
					height: 250rpx;
					padding: 10rpx 0 0;
				}
			}
		}

		&.listB {
			justify-content: inherit;

			.item {
				width: 31.3%;
				margin-right: 3.05%;
				margin-bottom: 0;
				display: flex;
				flex-flow: column nowrap;

				.pictrue,
				::v-deepimage,
				::v-deep.easy-loadimage,
				::v-deepuni-image {
					height: 220rpx;
				}

				.sell_out {
					width: 110rpx;
					height: 110rpx;

					&::before {
						width: 100rpx;
						height: 100rpx;
					}
				}

				&:nth-child(3n) {
					margin-right: 0;
				}

				.price {
					font-size: 20rpx;

					text {
						font-size: 28rpx;
					}
				}

				.text-info {
					padding: 10rpx 4rpx 20rpx;
					flex: 1;
					display: flex; 
					flex-direction: column;
					justify-content: space-between;
				}
			}
		}

		&.listC {
			.item {
				width: 100%;
				margin-bottom: 16px;

				.pictrue,
				::v-deepimage,
				::v-deep.easy-loadimage,
				::v-deepuni-image {
					height: 320rpx;
				}

				.price {
					margin-top: 8px;
					font-size: 40rpx;
					display: flex;
					align-items: center;
				}

				.text-info {
					padding: 8px 0 0 0;

					.title {
						color: #333;
					}
				}
			}

			.add-cart {
				bottom: 0rpx;
				right: 0rpx;
			}
		}

		&.listS {
			padding-top: 20rpx;

			.item {
				background: #ffffff;
				width: calc(50% - 10rpx);
			}

			.price {
				font-size: 40rpx;
				display: flex;
				align-items: baseline;
			}

			.cont1,
			::v-deep.cont1 image,
			::v-deep.cont1 .easy-loadimage,
			::v-deep.cont1 uni-image,
			.cont1 .border-picture {
				border-radius: 16rpx 16rpx 0 0;
			}

			.bg1 {
				border-radius: 16rpx;
			}

			.text-info {
				padding: 20rpx;

				&.min-height {
					min-height: 90rpx;
				}
			}
		}
	}
}

.add-cart {
	bottom: 20rpx;
	right: 20rpx;
}

.distance-info-wrap {
	position: absolute;
	left: 20rpx;
	bottom: 20rpx;
	max-width: 95%;
	--bg-color: rgba(255, 255, 255, 0.8);
}
</style>
